"use client";
import { GalleryVerticalEnd } from "lucide-react";
import Image from "next/image";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { postData } from "@/components/utils/api";
import { FastResponse, LoginResponse } from "@/components/models/dataprops";
import { useRouter } from "next/navigation";
import useUserStore from "@/components/state/login_state";

interface LoginProps {
  username: string;
  password: string;
}

export default function LoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const setData = useUserStore((state) => state.setData);
  const [msg, setMsg] = useState("");
  const router = useRouter();
  async function submitLogin() {
    const payload: LoginProps = {
      username: username,
      password: password,
    };
    try {
      const result = await postData<FastResponse<LoginResponse>, LoginProps>(
        "/api/user/login",
        payload
      ); // 泛型定义请求和响应类型
      if (result.code == 200) {
        if (result.data.state == "success") {
          setMsg("验证成功");
          setData(
            result.data.token,
            result.data.user.email,
            result.data.user.real_name,
            result.data.user.role
          );
          router.push("/data/list");
        } else {
          setMsg(result.data.msg);
        }
      }
      console.log(result);
    } catch (error) {
      console.log("Error submitting data:", error);
      setMsg("网络错误，请检查网络");
    }
  }

  return (
    <div className="grid min-h-95vh lg:grid-cols-2">
      <div className="flex flex-col gap-4 p-2 md:p-4">
        <div className="flex justify-center gap-2 md:justify-start">
          <a href="#" className="flex items-center gap-2 font-medium">
            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
              <GalleryVerticalEnd className="size-4" />
            </div>
            武汉大学智能与创新治理研究所
          </a>
        </div>
        <div className="flex flex-1 items-center justify-center">
          <div className="w-full max-w-sm">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-2 text-center mb-20">
                <Image
                  width={100}
                  height={100}
                  src="/images/icon.svg"
                  alt="logo"
                  className="h-32 w-32"
                />
                <h1 className="text-2xl font-bold">数据模型创新管理平台</h1>
              </div>

              <div className="grid gap-6">
                <div className="grid gap-2">
                  <p className="text-sm text-red-600 font-semibold">{msg}</p>
                  <Label htmlFor="email">邮箱</Label>
                  <Input
                    id="email"
                    type="email"
                    name="username"
                    placeholder="user@whu.edu.cn"
                    required
                    onChange={(e) => setUsername(e.target.value)}
                  />
                </div>
                <div className="grid gap-2">
                  <div className="flex items-center">
                    <Label htmlFor="password">密码</Label>
                    <a
                      href="#"
                      className="ml-auto text-sm underline-offset-4 hover:underline"
                    >
                      忘记密码?
                    </a>
                  </div>
                  <Input
                    id="password"
                    type="password"
                    name="password"
                    placeholder="密码默认为姓名全拼"
                    required
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <Button onClick={submitLogin} className="w-full">
                  登录
                </Button>
              </div>
              <div className="text-center text-sm">
                没有账号?{" "}
                <a href="#" className="underline underline-offset-4">
                  联系管理员创建账号
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="relative hidden bg-muted lg:block">
        <Image
          src="/images/demo.png"
          alt="Image"
          width={500}
          height={1000}
          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
        />
      </div>
    </div>
  );
}
